<template>
	<view class="updataview">
		<view class="box1">
			<view class="left">
				头像
			</view>
			<view class="right">
				<view class="yuan"></view>
			</view>
		</view>
		<view class="box">
			<view class="left">
				昵称
			</view>
			<view class="right">
				<input type="text" :placeholder="user.username" v-mdoe="username">
			</view>
		</view>
		<view class="box">
			<view class="left">
				性别
			</view>
			<view class="right">
				{{user.sex}}
			</view>
		</view>
		<view class="box" @click="tiaophone()">
			<view class="left">
				手机
			</view>
			<view class="right">
				{{user.phone}}
			</view>
		</view>
		<view class="bottom">
			<view class="btn">
				提交
			</view>
		</view>

		<view class="bottom">
			<view class="btn" @click="tclogin()">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: "",
				user: []
			}
		},
		onShow() {
			this.user = wx.getStorageSync("user")
		},
		methods: {
			//跳转到绑定手机
			tiaophone() {
				uni.navigateTo({
					url: "../mobile/mobile"
				})
			},
			//退出登录
			tclogin() {
				wx.removeStorageSync("token")
				wx.removeStorageSync("user")
				uni.switchTab({
					url: "../mymine/mymine"
				})
			}
		}
	}
</script>

<style lang="scss">
	.updataview {
		width: 100%;

		.bottom {
			width: 100%;
			padding: 20px;
			box-sizing: border-box;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
			color: #fff;

			.btn {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 30rpx;
				border-radius: 5rpx;
				background-color: #5ccc84;
			}
		}

		.box1 {
			height: 140rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;


			.left {
				font-size: 32rpx;
				color: #6c757d;
				display: flex;
				align-items: center;
			}

			.right {
				.yuan {
					width: 122rpx;
					height: 122rpx;
					border-radius: 50%;
					background-color: #6c757d;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.box {
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			box-sizing: border-box;


			.left {
				font-size: 32rpx;
				color: #6c757d;
				display: flex;
			}

			.right {
				font-size: 30rpx;
			}
		}
	}
</style>
